<template>
  <div class="hero-website-startup">
    <div class="header-type-1">
      <div class="header-type-12">
        <div class="pateern">
          <div class="mask">
            <div class="mask2"></div>
            <div class="mask2"></div>
            <div class="mask3"></div>
          </div>
        </div>
        <div class="header">
          <div class="rectangle"></div>
          <div class="wiredunk">FILMACTION</div>
          <div class="button-let-talk">
            <div class="rectangle2"></div>
            <div class="services">Search</div>
          </div>
          <svg
            class="menu"
            width="40"
            height="40"
            viewBox="0 0 40 40"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8 11H32V13H8V11ZM8 27H32V29H8V27ZM32 19H8V21H32V19Z"
              fill="white"
            />
          </svg>

          <svg
            class="vector"
            width="18"
            height="16"
            viewBox="0 0 18 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4 0V16M14 0V16M0 4H4M9 8L18 4M0 8H18M0 12H4M14 12H18M1 16H17C17.2652 16 17.5196 15.8946 17.7071 15.7071C17.8946 15.5196 18 15.2652 18 15V1C18 0.734784 17.8946 0.48043 17.7071 0.292893C17.5196 0.105357 17.2652 0 17 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16Z"
              stroke="white"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>
    </div>
    <svg
      class="ic-search"
      width="114"
      height="24"
      viewBox="0 0 114 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M108.5 13H107.71L107.43 12.73C108.41 11.59 109 10.11 109 8.5C109 4.91 106.09 2 102.5 2C98.91 2 96 4.91 96 8.5C96 12.09 98.91 15 102.5 15C104.11 15 105.59 14.41 106.73 13.43L107 13.71V14.5L112 19.49L113.49 18L108.5 13V13ZM102.5 13C100.01 13 98 10.99 98 8.5C98 6.01 100.01 4 102.5 4C104.99 4 107 6.01 107 8.5C107 10.99 104.99 13 102.5 13V13Z"
        fill="white"
      />
    </svg>

    <div class="_2019-mahameru">© 2023. Filmaction</div>
    <div>
      <div class="mobile-dumber">
        <div class="mobile-dumber2">
          <div class="c0">分镜头脚本</div>
          <div class="storyboard">Storyboard</div>
        </div>
      </div>
    </div>
    <div class="button-text">生成</div>
    <div>
      <el-input class="rectangle-1738" type="textarea" :rows="14" v-model="story"></el-input>
      <div class="mobile-dumber3">
        <div class="a1">镜号1</div>
      </div>
    </div>
      <div class="c2">请选择一张图片</div>
    <div class="frame">
      <img class="vector2" mode="aspectFit" :src="src1" :onerror="defaultImg"/>

    </div>
    <div class="frame2" >
      <img class="vector2" mode="aspectFit" :src="src2" :onerror="defaultImg"/>
    </div>


    <div class="frame3">
      <img class="vector2" mode="aspectFit" :src="src3" :onerror="defaultImg"/>
    </div>

    <div class="frame4">
      <img class="vector2" mode="aspectFit" :src="src4" :onerror="defaultImg"/>
    </div>

    <div>
      <div class="rectangle5"></div>
      <div class="text">动漫</div>
      <div class="c3">风格选择</div>
      <div class="group-7341">
        <div class="rectangle6"></div>
        <div class="text2">1：1</div>
        <div class="c4">图片尺寸</div>
        <svg
          class="chevron-down"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6 9L12 15L18 9"
            stroke="black"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
      <div class="group-7342">
        <div class="rectangle7"></div>
        <div class="text3">远景</div>
        <div class="c5">镜头景别</div>
        <svg
          class="chevron-down2"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M6 9L12 15L18 9"
            stroke="black"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </div>
    </div>
    <div class="button-square-2-big-1-primary">
      <div class="group-12">
        <div class="button"></div>
        <div class="button-text2"></div>
      </div>
    </div>
    <div class="button-square-2-big-1-primary2">
      <div class="group-12">
        <div class="button"></div>
        <div class="button-text2"></div>
      </div>
    </div>
    <div class="button-square-2-big-1-primary3">
      <div class="group-12">
        <div class="button2"></div>
        <div class="button-text2"></div>
      </div>
    </div>
    <router-link to="/set_movie" class="button-text3">生成</router-link>
    <router-link to="/" class="button-text4">保存</router-link>
    <router-link to="/gen_story" class="button-text5">返回</router-link>
    <svg
      class="arrow-left"
      width="36"
      height="33"
      viewBox="0 0 36 33"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M4.5 16.5H31.5M15 26.125L4.5 16.5L15 26.125ZM4.5 16.5L15 6.875L4.5 16.5Z"
        stroke="white"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </div>
</template>
<script>
/* Code generated with AutoHTML Plugin for Figma */

export default {
  name: "HeroWebsiteStartup",
  components: {},
  props: {},
  computed: {
        defaultImg () {
            return 'this.src="' + require('@/assets/default.png') + '"';
        }
    },
  data() {
    // quickfix to have components available to pass as props
    return {
      story: "",
      src1: "",
      src2: "",
      src3: "",
      src4: "",
    };
  },
  
  mounted() {
    this.story = this.$route.query.story
    var that = this
    this.$http({
        url: "/picture/query",
        method: "post",
        headers: {
          'Content-Type': 'application/json'
        },
        data: {
          "story": that.story
        }
      }).then((res) => {
        if (res.status == 200) {
          that.src1 = res.data.result[0]
          that.src2 = res.data.result[1]
          that.src3 = res.data.result[2]
          that.src4 = res.data.result[3]
        }
        else {
          that.$notify.error({
            title: '服务器失败 :/picture/query',
            message: res.response,
            duration: 5000
          });
        }
      })
  },
};
</script>
<style scoped>
.hero-website-startup,
.hero-website-startup * {
  box-sizing: border-box;
}
.hero-website-startup {
  background: #ffffff;
  width: 1440px;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.header-type-1 {
  position: absolute;
  inset: 0;
}
.header-type-12 {
  width: 1440px;
  height: 95px;
  position: static;
}
.pateern {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask2 {
  background: #3056d3;
  width: 1440px;
  height: 83px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.mask3 {
  background: #000000;
  border-radius: 130px;
  opacity: 0.10000000149011612;
  width: 1793.68px;
  height: 1184.35px;
  position: absolute;
  left: -1435.28px;
  top: 70.79px;
  transform-origin: 0 0;
  transform: rotate(-45deg) scale(1.413, 0.051);
}
.header {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 15px;
  overflow: hidden;
}
.rectangle {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.wiredunk {
  color: #ffffff;
  text-align: left;
  font: 700 24px "Montserrat", sans-serif;
  position: absolute;
  left: 131px;
  top: calc(50% - 26px);
}
.button-let-talk {
  width: 142px;
  height: 38px;
  position: absolute;
  left: 1131px;
  top: 11px;
  overflow: hidden;
}
.rectangle2 {
  background: #ffffff;
  border-radius: 30px;
  opacity: 0.10000000149011612;
  width: 142px;
  height: 38px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.services {
  color: #ffffff;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 44px;
  top: 9px;
}
.menu {
  position: absolute;
  left: 1353px;
  top: 9px;
  overflow: visible;
}
.vector {
  position: absolute;
  left: 101px;
  top: 21px;
  overflow: visible;
}
.ic-search {
  position: absolute;
  left: 1216px;
  top: 34px;
  overflow: visible;
}
._2019-mahameru {
  color: #a78585;
  text-align: left;
  font: 400 10px/24px "Open Sans", sans-serif;
  position: absolute;
  left: 675px;
  top: calc(50% - -350px);
}
.not-data {
  position: absolute;
  inset: 0;
}
.mobile-dumber {
  width: 188.02px;
  height: 19px;
  position: static;
}
.mobile-dumber2 {
  background: #ffffff;
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 188.02px;
  position: absolute;
  left: 211px;
  top: 221px;
}
.c0 {
  color: var(--_03, #22215b);
  text-align: center;
  font: 700 14px "Manrope", sans-serif;
  position: relative;
}
.storyboard {
  color: var(--_04, #9090ad);
  text-align: center;
  font: 500 14px "Manrope", sans-serif;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-text {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 456px;
  left: 951px;
  bottom: 494px;
  top: 282px;
}
.select-employee {
  position: absolute;
  inset: 0;
}
.rectangle-1738 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: rgba(34, 33, 91, 0.16);
  border-width: 1px;
  width: 233px;
  height: 295.61px;
  position: absolute;
  left: 213px;
  top: 284.39px;
}
.mobile-dumber3 {
  background: #ffffff;
  padding: 0px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 60px;
  height: 30px;
  position: absolute;
  left: 216.83px;
  top: 261px;
}
.a1 {
  color: var(--_03, #22215b);
  text-align: center;
  font: 400 14px "Manrope", sans-serif;
  position: relative;
}
.frame {
  width: 179px;
  height: 179px;
  position: absolute;
  left: 899px;
  top: 256px;

}
.vector2 {
  height: 127.5px;
  width: 170px;
  border-radius: 5px;
  object-fit: cover;
}
.c2 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Manrope", sans-serif;
  position: absolute;
  left: 900px;
  top: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.frame2 {
  position: absolute;
  left: 1078px;
  top: 256px;
  overflow: visible;
}
.frame3 {
  position: absolute;
  left: 899px;
  top: 408px;
  overflow: visible;
}
.frame4 {
  position: absolute;
  left: 1078px;
  top: 408px;
  overflow: visible;
}
.group-4163 {
  position: absolute;
  inset: 0;
}
.rectangle5 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 509px;
  top: 285px;
}
.text {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Manrope", sans-serif;
  position: absolute;
  left: 526px;
  top: 299px;
}
.c3 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Manrope", sans-serif;
  position: absolute;
  left: 516px;
  top: 258px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.group-7341 {
  width: 327px;
  height: 77px;
  position: static;
}
.rectangle6 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 509px;
  top: 372px;
}
.text2 {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Inter", sans-serif;
  position: absolute;
  left: 526px;
  top: 386px;
}
.c4 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Manrope", sans-serif;
  position: absolute;
  left: 516px;
  top: 345px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.chevron-down {
  position: absolute;
  left: 796px;
  top: 385px;
  overflow: visible;
}
.group-7342 {
  width: 327px;
  height: 77px;
  position: static;
}
.rectangle7 {
  background: #ffffff;
  border-radius: 10px;
  border-style: solid;
  border-color: #e0dfe3;
  border-width: 1px;
  width: 327px;
  height: 50px;
  position: absolute;
  left: 509px;
  top: 459px;
}
.text3 {
  color: var(--placehodercolor, #bebebe);
  text-align: left;
  font: 400 14px/22px "Inter", sans-serif;
  position: absolute;
  left: 526px;
  top: 473px;
}
.c5 {
  color: var(--primary-color, #212121);
  text-align: left;
  font: 400 14px "Manrope", sans-serif;
  position: absolute;
  left: 516px;
  top: 432px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.chevron-down2 {
  position: absolute;
  left: 796px;
  top: 472px;
  overflow: visible;
}
.button-square-2-big-1-primary {
  width: 94px;
  height: 41px;
  position: absolute;
  left: 509px;
  top: 533px;
}
.group-12 {
  width: 94px;
  height: 41px;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
.button {
  background: #3056d3;
  border-radius: 6px;
  width: 94px;
  height: 41px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.button-text2 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 48px;
  left: 46px;
  bottom: 2px;
  top: 15px;
}
.button-square-2-big-1-primary2 {
  width: 94px;
  height: 41px;
  position: absolute;
  left: 621px;
  top: 533px;
}
.button-square-2-big-1-primary3 {
  width: 94px;
  height: 41px;
  position: absolute;
  left: 733px;
  top: 532px;
}
.button2 {
  background: #93aaf5;
  border-radius: 6px;
  width: 94px;
  height: 41px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.button-text3 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 869px;
  left: 538px;
  bottom: 235px;
  top: 541px;
}
.button-text4 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 756px;
  left: 651px;
  bottom: 235px;
  top: 541px;
}
.button-text5 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 644px;
  left: 763px;
  bottom: 235px;
  top: 541px;
}
.arrow-left {
  position: absolute;
  left: 384px;
  top: 497px;
  overflow: visible;
}
</style>
